<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<u-icon name="arrow-left" color="#333" size="18"></u-icon>
				</view>
				<view class="nav-title">认养列表</view>
				<view class="nav-right"></view>
			</view>
		</view>

		<!-- 认养项目列表 -->
		<view class="adopt-list">
			<!-- 循环渲染认养项目 -->
			<view class="adopt-item" v-for="item in adoptItems" :key="item.id">
				<view class="item-left">
					<view class="image-container">
						<image class="adopt-image" :src="item.image" mode="aspectFill"></image>
						<view class="adopt-badge">认</view>
					</view>
				</view>
				<view class="adopt-info">
					<view class="adopt-title">{{item.title}}</view>
					<view class="adopt-subtitle">收获: {{item.subtitle}}</view>
					<view class="adopt-meta">
						<view class="adopt-remain">已售:{{item.sold}}</view>
						<view class="adopt-sales">剩余:{{item.remain}}</view>
					</view>
					<view class="progress-wrap">
						<u-line-progress :percentage="calculatePercentage(item.sold, item.remain)" :showText="false"
							height="10" activeColor="#4CAF50" inactiveColor="#f5f5f5">
							<text class="u-percentage-slot">{{calculatePercentage(item.sold, item.remain)}}%</text>
						</u-line-progress>
					</view>
					<view class="adopt-price-row">
						<view class="adopt-price">¥ {{item.price}}</view>
						<view class="adopt-btn" :class="{'adopt-btn-sold': item.remain === 0}" @click="goToDetail(item)">
							{{item.remain === 0 ? '售罄' : '进行中'}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载更多 -->
		<u-loadmore :status="loadStatus" :nomore-text="'没有更多了'" @loadmore="loadMore"></u-loadmore>
	</view>
</template>

<script>
	import request from '@/util/request.js';

	export default {
		data() {
			return {
				adoptItems: [],
				loadStatus: 'loadmore', // loadmore loading nomore
				page: 1,
				pageSize: 10,
				hasMore: true,
				statusBarHeight: 0,
				navBarHeight: 88
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				// uni.navigateBack();//网页中刷新后就只会返回本页面，而非上一个页面了
				uni.switchTab({
					url: '/pages/farm/adopt'
				});
			},

			// 计算百分比
			calculatePercentage(sold, remain) {
				const total = sold + remain;
				// 防止除零错误
				if (total === 0) {
					return 0;
				}
				return Math.floor((sold / total) * 100);
			},
			
			// 跳转到认养详情页面
			goToDetail(item) {
				// 如果已售罄，不允许跳转
				if (item.remain === 0) {
					uni.showToast({
						title: '该项目已售罄',
						icon: 'none'
					});
					return;
				}
				
				uni.navigateTo({
					url: `/pages/farm/adoptDetail?id=${item.id}`
				});
			},

			// 获取认养项目列表
			getAdoptList(loadMore = false) {
				if (!loadMore) {
					this.loadStatus = 'loading';
				}

				request({
					url: '/adopt-service/adopt/list',
					method: 'GET'
				}).then(res => {
					if (res.success && res.data.adoptList) {
						// 处理图片URL，添加基础路径
						const processedList = res.data.adoptList.map(item => {
							return {
								...item,
								image: `http://121.36.197.175:19000/test/${item.image}`
							};
						});

						if (loadMore) {
							// 加载更多时追加数据
							this.adoptItems = [...this.adoptItems, ...processedList];
						} else {
							// 首次加载时替换数据
							this.adoptItems = processedList;
						}

						// 模拟分页逻辑，实际项目中根据后端返回判断
						if (processedList.length < this.pageSize) {
							this.loadStatus = 'nomore';
							this.hasMore = false;
						} else {
							this.loadStatus = 'loadmore';
						}
					} else {
						uni.showToast({
							title: '获取认养项目失败',
							icon: 'none'
						});
						this.loadStatus = 'loadmore';
					}
				}).catch(err => {
					console.error('获取认养项目出错', err);
					this.loadStatus = 'loadmore';
				});
			},

			// 加载更多
			loadMore() {
				if (!this.hasMore) return;

				this.page++;
				this.loadStatus = 'loading';
				// 这里可以加延时模拟网络请求
				setTimeout(() => {
					this.getAdoptList(true);
				}, 1000);
			}
		},
		onLoad() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;

			// 页面加载时获取数据
			this.getAdoptList();
		},
		onReachBottom() {
			// 滚动到底部时加载更多
			if (this.loadStatus === 'loadmore' && this.hasMore) {
				this.loadMore();
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 自定义导航栏 */
	.nav-bar {
		background-color: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.status-bar {
		width: 100%;
		background-color: #ffffff;
	}

	.nav-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 30rpx;
		background-color: #ffffff;
	}

	.nav-left {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		flex: 1;
	}

	.nav-right {
		width: 60rpx;
		flex-shrink: 0;
	}

	.adopt-list {
		padding: 20rpx;
		padding-top: 200rpx;
	}

	.adopt-item {
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		display: flex;
		position: relative;
		align-items: flex-start;
	}

	.item-left {
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		height: 100%;
	}

	.image-container {
		position: relative;
		width: 240rpx;
		height: 240rpx;
	}

	.adopt-badge {
		background-color: #FFA726;
		color: #ffffff;
		font-size: 24rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 6rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.adopt-info {
		flex: 1;
		width: 0;
		overflow: hidden;
		max-width: calc(100% - 260rpx);
	}

	.adopt-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.adopt-subtitle {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.adopt-meta {
		display: flex;
		margin-bottom: 10rpx;
	}

	.adopt-remain {
		font-size: 24rpx;
		color: #999;
		margin-right: 20rpx;
	}

	.adopt-sales {
		font-size: 24rpx;
		color: #999;
	}

	.adopt-price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.adopt-price {
		color: #FF5722;
		font-size: 36rpx;
		font-weight: bold;
	}

	.adopt-btn {
		background-color: #4CAF50;
		color: #ffffff;
		font-size: 28rpx;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		margin-right: 10rpx;
	}

	.adopt-btn-sold {
		background-color: #F44336 !important;
	}

	.adopt-image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	/* 进度条样式 */
	.progress-wrap {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		position: relative;
	}

	.progress-wrap /deep/ .u-line-progress {
		flex: 1;
	}

	.u-percentage-slot {
		color: #000000;
		font-size: 20rpx;
	}
</style>